<!--  -->

<template>
    <view>


        <view class="container">
            <scroll-view class="scroll-view" scroll-y>
                <uni-calendar :insert="true" :lunar="true" :selected="list" @change="clickActive" />
                <cowain-slide-action :slide-width="90" v-for="(item, index) in list" :key="index">
                    <template v-slot:card>
                        <view class="card" @click="_markRead(item)">
                            <view class="header-wrap">
                                <view class="title-wrap">
                                    <view class="dot"
                                        v-if="item.avatar == 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/%E4%BB%A3%E5%8A%9E.png'">
                                    </view>
                                    <view class="dot2" v-else></view>
                                    <text class="title">{{ item.title }}</text>
                                </view>
                                <text class="time">{{ item.time }}</text>
                            </view>
                            <view class="remark">
                                <text class="msg">{{ item.details }}</text>
                            </view>
                        </view>
                    </template>

                    <template v-slot:delete>
                        <view class="delete-wrap">
                            <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/%E5%85%B3%E9%97%AD.png"
                                class="icon-delete" @click.stop="onDeleteItemClick(index)" />
                        </view>
                    </template>
                </cowain-slide-action>
            </scroll-view>
        </view>
        <view class="goods-carts">

            <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/%E6%B7%BB%E5%8A%A02.png"
                style="width: 90rpx;height: 90rpx;margin: 0 auto;" @click.stop="open2" />
        </view>
        <u-popup ref="popup" :show="show" type="bottom" background-color="#fff">

            <view style="height: 800rpx;padding: 20rpx;">
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="4">
                        <view><u-icon name="checkmark" color="#007aff" size="25" bold="true" space="10"
                                @click="addtask"></u-icon>
                        </view>
                    </u-col>
                    <u-col span="4">
                        <view style="text-align: center">{{ date }}</view>
                    </u-col>
                    <u-col span="4">
                        <view><u-icon name="close" color="#fa3534" size="25" bold="true" space="10"
                                @click="close2"></u-icon>
                        </view>
                    </u-col>
                </u-row>
                <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
                    <u-form-item label="类别" prop="typename" borderBottom @click="showType = true;" ref="item1">
                        <u--input v-model="typename" disabled disabledColor="#ffffff" placeholder="请选择性别"
                            border="none"></u--input>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>
                    <u-form-item label="标题" prop="formData.title" borderBottom ref="item1">
                        <u--input v-model="formData.title" border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="时间" prop="formData.time" borderBottom @click="showTime = true;" ref="item1">
                        <u--input v-model="formData.time" disabled disabledColor="#ffffff" placeholder="请选择性别"
                            border="none"></u--input>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>
                    <u-form-item label="内容" prop="formData.details" borderBottom ref="item1">
                        <u--textarea v-model="formData.details" placeholder="请输入内容" count autoHeight></u--textarea>
                    </u-form-item>
                </u--form>
                <u-action-sheet :show="showType" :actions="range" @close="showType = false" @select="typeSelect">
                </u-action-sheet>
                <u-datetime-picker :show="showTime" v-model="timeValue" mode="time"
                    @confirm="timeSelect"></u-datetime-picker>
            </view>
        </u-popup>
    </view>
</template>

<script>

import "@/static/css/tailwind.css"
export default {
    data() {
        return {
            openid: "",
            show: false,
            showTime: false,
            timeValue: '05:28',
            showType: false,
            formData: {},
            typename: "",
            range: [
                {
                    value: "https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/%E4%BB%A3%E5%8A%9E.png",
                    name: "代办"
                },
                {
                    value: "https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/%E5%A4%87%E5%BF%98%E5%BD%95.png",
                    name: "备忘"
                }
            ],

            list: [],
            date: "",
            show: false,
            options2: [
                {
                    text: '取消',
                    style: {
                        backgroundColor: '#007aff'
                    }
                },
                {
                    text: '确认',
                    style: {
                        backgroundColor: '#dd524d'
                    }
                }
            ]

        };
    },

    components: {},

    computed: {},
    onReady() {
        // 微信小程序需要用此写法
        this.$refs.datetimePicker.setFormatter(this.formatter)
    },
    mounted() {



    },
    onLoad(options) {
        this.date = this.getCurrentDate();
        this.openid = options.openid;
        this.formData.openid = this.openid;
        this.formData.date = this.date;
        this.getTaskList(this.date);
    },
    created() { },

    methods: {
        openAuth() {
            console.log('openAuth')
            uni.requestSubscribeMessage({
                tmplIds: ['WSjNDldNqeCMYHivK2bITtFJT-F68y-AiKfabqfrV4A'],
                success: (res) => {
                    console.log('openAuth', res);
                }
            })
        },
        addtask() {
            this.formData.inputtime = new Date();
            uni.requestSubscribeMessage({
                tmplIds: ['WSjNDldNqeCMYHivK2bITtFJT-F68y-AiKfabqfrV4A'],
                success: (res) => {
                    uni.request({

                        url: 'https://zhangteng.cloud:5001/api/CalendarList/Add',

                        method: 'POST',
                        data: this.formData,
                        success: (res) => {
                            console.log('addtask', res)
                            this.getTaskList(this.formData.date);
                            this.openAuth();
                        }
                    })
                }
            })
        },
        onDeleteItemClick(index) {

            uni.request({

                url: 'https://zhangteng.cloud:5001/api/CalendarList/Delete/' + this.list[index].id,

                method: 'DELETE',

                success: (res) => {
                    uni.showToast({
                        title: `删除成功`,
                        icon: 'success'
                    })
                    this.getTaskList(this.date);

                }
            })
        },
        typeSelect(e) {
            this.formData.avatar = e.value;
            this.typename = e.name;

        },
        timeSelect(e) {
            //console.log('e', e)
            this.formData.time = e.value;
            this.showTime = false;
            //console.log('this.formData', this.formData)
        },
        open2() {
            // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
            this.show = true
        },
        close2() {
            this.show = false
        },
        getCurrentDate() {
            const date = new Date();
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const formattedDate = `${year}-${month}-${day}`;

            return formattedDate;
        },
        // 点击日数方法
        clickActive({ year, month, date, index }) {
            date = date < 10 ? '0' + date : date
            const date2 = new Date(year + "-" + month + "-" + date);

            const year2 = date2.getFullYear();
            const month2 = (date2.getMonth() + 1).toString().padStart(2, '0');
            const day2 = date2.getDate().toString().padStart(2, '0');

            const formattedDate = `${year2}-${month2}-${day2}`;

            console.log('formattedDate', formattedDate);
            this.date = formattedDate;
            this.getTaskList(formattedDate);
        },
        getTaskList(date) {
            uni.request({
                url: 'https://zhangteng.cloud:5001/api/CalendarList/GetOpenid/' + this.openid + "/" + date,

                success: (res) => {
                    console.log('getTaskList', res)
                    this.list = res.data;
                    this.close2();
                }
            })
        },
        // 点击任务方法
        clickTask({ row, index }) {
            console.log(row, index)
        },
    }
}

</script>

<style lang='scss' scoped></style>

<style>
.container {
    width: 100%;
    height: 100vh;
    background-color: rgba(245, 246, 248, 1);
}

.scroll-view {
    width: 100%;
    height: 100%;
}

.card {
    margin-left: 24rpx;
    width: 702rpx;
    height: 171rpx;
    padding: 28rpx 24rpx;
    box-sizing: border-box;
    border-radius: 24rpx;
    background-color: white;

}

.header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-wrap {
    display: flex;
    align-items: center;
}

.dot {
    margin-right: 11rpx;
    width: 16rpx;
    height: 16rpx;
    background-color: rgba(222, 11, 11, 1);
    border-radius: 8rpx;
}

.dot2 {
    margin-right: 11rpx;
    width: 16rpx;
    height: 16rpx;
    background-color: rgb(6, 238, 76);
    border-radius: 8rpx;
}

.title {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #323233;
    line-height: 45rpx;
}

.remark {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 26rpx;
}

.time {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: $txt-black-204;
    line-height: 36rpx;
}

.msg {
    width: 540rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 36rpx;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delete-wrap {
    position: absolute;
    right: 0px;
    top: 0;
    width: 180rpx;
    height: 171rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.icon-delete {
    width: 80rpx;
    height: 80rpx;
    object-fit: cover;
}

.goods-carts {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    /* #ifdef H5 */
    left: var(--window-left);
    right: var(--window-right);
    /* #endif */
    bottom: 30rpx;
}
</style>